let map , boxes , human

const init = () => {
	// map = [
	// 	[0, 9, 9, 9, 9, 9, 0],
	// 	[9, 9, 0, 8, 0, 9, 9],
	// 	[9, 0, 0, 0, 0, 8, 9],
	// 	[9, 0, 0, 0, 0, 0, 9],
	// 	[9, 8, 0, 0, 0, 0, 9],
	// 	[9, 9, 0, 0, 8, 9, 9],
	// 	[0, 9, 9, 9, 9, 9, 0]
	// ]
	// boxes = [
	// 	{row: 2, col: 3},
	// 	{row: 3, col: 2},
	// 	{row: 3, col: 4},
	// 	{row: 4, col: 3}
	// ]
	// human = {
	// 	row: 3,
	// 	col: 3
	// }
	map = [
		[0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 9, 9],
		[0, 0, 0, 0, 0, 9, 8, 8, 8, 0, 0, 8, 0, 9],
		[0, 0, 9, 9, 9, 9, 0, 9, 8, 9, 8, 0, 0, 9],
		[9, 9, 9, 0, 0, 0, 0, 8, 8, 8, 8, 8, 8, 9],
		[9, 0, 0, 0, 0, 0, 0, 0, 0, 9, 8, 8, 9, 9],
		[9, 0, 0, 9, 9, 9, 9, 8, 8, 9, 9, 9, 9, 0],
		[9, 0, 0, 0, 0, 0, 0, 9, 9, 9, 0, 0, 9, 9],
		[9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9],
		[9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9],
		[9, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9],
		[0, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0],
	]
	boxes = [
		{row: 4, col: 4},
		{row: 4, col: 6},
		{row: 4, col: 8},
		{row: 5, col: 2},
		{row: 6, col: 3},
		{row: 7, col: 2},
		{row: 7, col: 3},
		{row: 7, col: 4},
		{row: 7, col: 6},
		{row: 7, col: 8},
		{row: 7, col: 10},
		{row: 8, col: 3},
		{row: 8, col: 5},
		{row: 8, col: 7},
		{row: 8, col: 9},
		{row: 8, col: 11},
	]
	human = {
		row: 7,
		col: 11
	}
}

const renderDom = (arr) => {
	let container = document.querySelector('.sokoban-container')
	container.innerHTML = ''
	arr.forEach(row => {
		let rDom = document.createElement('div')
		rDom.className = 'sokoban-row'
		row.forEach(col => {
			let cDom = document.createElement('div')
			cDom.className = `sokoban-item item-${col}`
			rDom.appendChild(cDom)
		})
		container.appendChild(rDom)
	})
}

const render = () => {
	let r = map.map(x => x.concat([])).concat([])
	boxes.forEach(b => {
		if(r[b.row][b.col] === 8) {
			r[b.row][b.col] = 3
		}
		if(r[b.row][b.col] === 0) {
			r[b.row][b.col] = 2
		}
	})

	if(r[human.row][human.col] === 8) {
		r[human.row][human.col] = 7
	}
	if(r[human.row][human.col] === 0) {
		r[human.row][human.col] = 1
	}
	renderDom(r)
	console.log(r.map(x => x.join(' ')).join('\n'))
	if(boxes.filter(b => map[b.row][b.col] !== 8).length === 0)
		alert('win !')
}

const checkBox = (row, col) => boxes.findIndex(b => b.row === row && b.col === col)

const moveHandler = keycode => {
	// let [row, col] = searchMan()
	console.log(human.row, human.col)
	let bo
	switch(keycode){
		case 38:
			// up
			if(human.row - 1 < 0 || map[human.row - 1][human.col] === 9) {
				break
			}
			bo = checkBox(human.row - 1, human.col)
			if(bo >= 0) {
				if(
					boxes[bo].row - 1 < 0 ||
					map[boxes[bo].row - 1][boxes[bo].col] === 9 ||
					checkBox(boxes[bo].row - 1, boxes[bo].col) >= 0
				) {
					break
				}
				boxes[bo].row --
			}
			human.row --
			break
		case 40:
			//down
			if(human.row + 1 >= map.length || map[human.row + 1][human.col] === 9) {
				break
			}
			bo = checkBox(human.row + 1, human.col)
			if(bo >= 0) {
				if(
					boxes[bo].row + 1 >= map.length ||
					map[boxes[bo].row + 1][boxes[bo].col] === 9 ||
					checkBox(boxes[bo].row + 1, boxes[bo].col) >= 0
				) {
					break
				}
				boxes[bo].row ++
			}
			human.row ++
			break
		case 37:
			//left
			if(human.col - 1 < 0 || map[human.row][human.col - 1] === 9) {
				break
			}
			bo = checkBox(human.row, human.col - 1)
			if(bo >= 0) {
				if(
					boxes[bo].col - 1 < 0 ||
					map[boxes[bo].row][boxes[bo].col - 1] === 9 ||
					checkBox(boxes[bo].row, boxes[bo].col - 1) >= 0
				) {
					break
				}
				boxes[bo].col --
			}
			human.col --
			break
		case 39:
			//right
			if(human.col + 1 >= map[0].length || map[human.row][human.col + 1] === 9) {
				break
			}
			bo = checkBox(human.row, human.col + 1)
			if(bo >= 0) {
				if(
					boxes[bo].col + 1 >= map[0].length ||
					map[boxes[bo].row][boxes[bo].col + 1] === 9 ||
					checkBox(boxes[bo].row, boxes[bo].col + 1) >= 0
				) {
					break
				}
				boxes[bo].col ++
			}
			human.col ++
			break
		default:
			return
	}
	render()
}

const sokoban = () => {
	init()
	document.getElementById('up').addEventListener('click', e => {
		moveHandler(38);
	}, false)
	document.getElementById('down').addEventListener('click', e => {
		moveHandler(40);
	}, false)
	document.getElementById('left').addEventListener('click', e => {
		moveHandler(37);
	}, false)
	document.getElementById('right').addEventListener('click', e => {
		moveHandler(39);
	}, false)
	document.onkeydown = function(ev){
		moveHandler(ev.keyCode);
	};
}

console.log('===== start =====')
sokoban()
render()